[#assign title]登录[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style>
    html,body {height: 80%;}
    body {display: -ms-flexbox;display: -webkit-box;display: flex;-ms-flex-align: center;-ms-flex-pack: center;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;}
    .form-signin {width: 100%;max-width: 330px;margin: 0 auto;}
    .form-signin .form-control {position: relative;box-sizing: border-box;height: auto;padding: 10px;font-size: 16px;}
    .form-signin .form-control:focus {z-index: 2;}
    .form-signin input[type="text"] {margin-bottom: -1px;border-bottom-right-radius: 0;border-bottom-left-radius: 0;}
    .form-signin input[type="password"] {margin-bottom: 10px;border-top-left-radius: 0;border-top-right-radius: 0;}
</style>
[/#macro]
[#macro body]
<form class="form-signin d-flex align-items-center flex-column" @keyup.enter="login">
    <h1 class="h3 mb-3 font-weight-normal">登录</h1>
    <input type="text" class="form-control form-control-lg" v-model="formData.username"
           placeholder="请输入手机号码" maxlength="11"/>
    <input type="password" class="form-control form-control-lg" v-model="formData.password"
           placeholder="请输入登录密码"/>
    <button type="button" class="btn btn-lg btn-primary btn-block" @click="login">登录</button>
    <a href="/register" class="btn btn-lg btn-success btn-block">注册</a>
</form>
[/#macro]
[#macro script]
<script>
    var app = new Vue({
        el: '#app',
        data: {
            formData: {},
            lastLoginTime: 0
        },
        methods: {
            login: function () {
                var vm = this;
                var lastLoginTime = vm.lastLoginTime;
                var currentTime = new Date().getTime();
                var diffTime = currentTime - lastLoginTime;
                vm.lastLoginTime = currentTime;
                if (diffTime < 1000) {
                    // 两次触发登录请求间隔少于1秒,则忽略此次请求
                    return false;
                }

                vm.$indicator.open({
                    text: '登录中...',
                    spinnerType: 'fading-circle'
                });
                axios.post('/login', vm.formData).then(function (response) {
                    vm.$indicator.close();
                    vm.$toast('登录成功');
                    window.location.href = response.data.Location;
                }).catch(function (error) {
                    vm.$indicator.close();
                    vm.$toast(error.response.data.message || '登录失败,请稍候重试');
                });
                return false;
            }
        },
        computed: {},
        mounted: function () {
            appHeader.isShow = false;
        }
    });
</script>
[/#macro]
